import React, { FC, useState, useEffect } from 'react';
import { IRouteComponentProps, useSelector, useDispatch } from 'umi';
import moment from 'moment';
import './readDetail.less';
import '../../utils/font_1hsfvuvglv9/iconfont.css';
import { BackTop } from 'antd';
import { IdetailRead } from '@/utils/know';
//
import Thetime from "@/store/modules/index"
// import 'github-markdown-css/github-markdown.css'
const ReadDetail: FC = (props) => {
  let id = history.state.state;
  const item1 = useSelector((state: { index: any }) => state.index);
  let item = item1.readDetailList;
  let detailReadList = [];
  if (typeof item.toc == 'string') {
    detailReadList = JSON.parse(item.toc);
  }
  const style = {
    height: 40,
    width: 40,
    lineHeight: '40px',
    borderRadius: '50%',
    backgroundColor: '#000000',
    color: '#fff',
    textAlign: 'center',
    fontSize: 16,
  };

  //时间
let dd=Thetime(item.publishAt as string | number);
  const [likes, setlikes] = useState(false);
  const dispatch = useDispatch();
  useEffect(() => {
    //详情数据
    dispatch({
      type: 'index/godetail',
      payload: { id: id },
    });
    //详情右边
    dispatch({
      type: 'index/deatilread',
      payload: { id: id },
    });
  }, []);

  function changeFlag() {
    dispatch({
      type: 'index/changelikes',
      payload: { id: id, like: likes },
    });
    setlikes(!likes);
  }
  return (
    <div className="detail">
      <div className="ce">
        <i
          className={`iconfont icon-xin ${likes ? 'active' : ''}`}
          onClick={() => changeFlag()}
        >
          <span>{item.likes}</span>
        </i>
        <i className="iconfont icon-xinxi"></i>
        <i className="iconfont icon-fenxiang"></i>
      </div>
      <div className="main">
        <div className="left">
          <img src={item.cover} alt="" />
          <div className="con">
            <div>
              <h1>{item.title}</h1>
              <p>
                发布时间{moment(item.createAt).format('YYYY-MM-DD h:mm:ss')}
                ·阅读量{item.views}
              </p>
            </div>
            <div dangerouslySetInnerHTML={{__html:item.html}}></div>
            <p className="p2">
              发布于{moment(item.createAt).format('YYYY-MM-DD h:mm:ss')} |
              版权信息：非商用-署名-自由转载
            </p>
          </div>
          {/* <div className="markdown-body">{item.content}</div> */}
        </div>
        <div className="right">
          <div className="right_top">
            <h2>推荐阅读</h2>
            <ul>
              {item1.detailReadList.length > 0
                ? item1.detailReadList.map((item: IdetailRead) => {
                    return (
                      <li key={item.id}>
                        <span>{item.title}</span> &emsp; <span>{dd}</span>
                      </li>
                    );
                  })
                : ''}
            </ul>
          </div>
          <div className="right_bottom">
              <h2>目录</h2>
            {
              detailReadList &&
                detailReadList.map((item: any) => {
                  return (
                    <ul key={item.id}>
                        {
                            item.level=="2"? <li>{item.id}</li>: <li style={{marginLeft:"20px"}}>{item.id}</li>
                        }
                    </ul>
                  );
                })
            }
          </div>
        </div>
      </div>
      <BackTop className="gotop">
        <div style={style}>
          <i className="iconfont icon-huidaodingbu"></i>
        </div>
      </BackTop>
    </div>
  );
};

export default ReadDetail;
